<template>
  <view class="dialog">
    <view>
      <view class="d_top">
        <text>工作评价</text>
        <image src="http://wangxinbao.oss-cn-beijing.aliyuncs.com/2024/04/03/c3c96cda2891467381f385fd63907190.png"
          @click="handleCancel" />
      </view>
      <view class="d_text">你对这份工作还满意吗？</view>
      <view class="d_rate">
        <uni-rate :value="rateValue" @change="handleChangeRate" :size="45" />
        <text>满意</text>
      </view>
      <view class="d_text2">评价内容</view>
      <view class="d_textarea">
        <textarea name="" id="" cols="30" rows="10" placeholder="请填写内容…" maxlength="300"
          @input="handleChangeNum"></textarea>
        <view class="textareaText">{{ textareaValue.length || 0 }}/300</view>
      </view>
      <view class="d_btn">
        <button class="cancel" @click="handleCancel">取消</button>
        <button class="submit" @click="handleSubmit">提交</button>
      </view>
    </view>
  </view>
</template>

<script>
import { evaluate } from "@/api/pages/mine.js"

export default {
  props: {
    seekerLogId: {
      type: String
    }
  },
  components: {},
  data() {
    return {
      textareaValue: 0, // 输入框字数
      showDialog: true, // 弹窗隐藏显示
      rateValue: 0  // 星星的数量
    };
  },
  computed: {},
  // 监控data中的数据变化
  watch: {
  },
  onLoad(options) {
  },
  onShow(options) {
  },
  onReady() { },
  mounted(option) {
    console.log(this.seekerLogId);
  },
  methods: {
    // 评分触发事件
    handleChangeRate(e) {
      this.rateValue = e.value
    },
    // 监听字数变化
    handleChangeNum(e) {
      this.textareaValue = e.detail.value
    },
    // 关闭弹窗
    handleCancel() {
      this.$emit('changeDialogShow', false)
    },
    // 提交评价
    handleSubmit() {
      console.log(this.seekerLogId, +this.rateValue);
      evaluate(
        {
          seekerLogId: this.seekerLogId,
          score: +this.rateValue,
          remark: this.textareaValue
        }
      ).then((res) => {
        if (res.code === 200) {
          this.$emit('changeDialogShow', false)
          this.$emit('upDate')
          uni.showToast({
            title: '评价成功'
          })
        }
      })
    }
  },
};

</script>
<style lang="scss" scoped>
.dialog {
  width: 100vw;
  height: 100vh;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;

  >view {
    width: 670rpx;
    height: 956rpx;
    background: #Fff;
    border-radius: 32rpx;
    padding: 30rpx 24rpx;

    >view {
      display: flex;
      width: 100%;
      align-items: center;
    }

    .d_top {
      justify-content: space-between;
      font-size: 36rpx;
      color: #000000e0;
      margin-bottom: 80rpx;
      font-weight: 500;

      image {
        width: 48rpx;
        height: 48rpx;
      }
    }

    .d_text {
      font-size: 32rpx;
      color: #000000e0;
      margin-bottom: 24rpx;
      font-weight: 900;
    }

    .d_rate {
      margin-bottom: 80rpx;

      >text {
        font-weight: 900;
        font-size: 24rpx;
        color: #00000073;
        margin-left: 20rpx;
      }
    }

    .d_text2 {
      font-weight: 900;
      font-size: 32rpx;
      color: #000000e0;
      margin-bottom: 24rpx;
    }

    .d_textarea {
      height: 318rpx;
      background: #F9F9F9;
      border-radius: 16rpx;
      position: relative;
      font-size: 28rpx;

      .textareaText {
        position: absolute;
        bottom: 10rpx;
        right: 10rpx;
        font-size: 22rpx;
        color: #00000073;
      }
    }

    .d_btn {
      justify-content: center;
      margin-top: 80rpx;

      .cancel {
        width: 240rpx;
        height: 80rpx;
        background: #d8d8d83d;
        border-radius: 44rpx;
        text-align: center;
        line-height: 80rpx;
        font-size: 28rpx;
        color: #000000e0;
        margin: 20rpx;
      }

      .submit {
        width: 240rpx;
        height: 80rpx;
        background: #FF9E24;
        border-radius: 44rpx;
        text-align: center;
        line-height: 80rpx;
        font-size: 28rpx;
        color: #FFFFFF;
        margin: 20rpx;
      }
    }
  }
}
</style>
